<template>
	<view class="peersonalInfo">
		<view class="main">
			<view class="main_item">
				<view class="infoItem" v-for="(item, index) in list" :key="item" @click="handleViewUserCert(item)" :style="{borderBottom:index==list.length-1?'none':'2rpx solid #eeeeee'}">
					<view class="left">{{ item.title }}</view>
					<view class="right">
						<view :style="{ color: !item.value ? '#ccc' : '' }" v-if="item.name !== 'avatar' && item.name !== 'userCerts'">
							{{ item.value || '待完善' }}
						</view>
						<!-- 头像 -->
						<image :src="item.value || '/static/mine.png'" mode="" class="avatar" v-if="item.name == 'avatar'"></image>
						<!-- 人员证件 -->
						<view v-if="item.name == 'userCerts'">
							<image :src="item.value[0].certImg.split(',')[0]" mode="" v-if="item.value && item.value.length"></image>
							<view class="improve" v-else>待完善</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { detail } from '@/apis/personalCenter.js';
export default {
	data() {
		return {
			list: [
				{
					title: '头像',
					name: 'avatar',
					value: '',
					isEidt: true
				},
				{
					title: '姓名',
					name: 'realName',
					value: '',
					isEidt: true
				},
				{
					title: '电话',
					name: 'phone',
					value: '',
					isEidt: true
				},
				{
					title: '地址',
					name: 'address',
					value: '',
					isEidt: true
				},
				{
					title: '交通工具',
					name: 'vehicleName',
					value: '',
					isEidt: true
				},
				{
					title: '人员证件',
					name: 'userCerts',
					value: '',
					isEidt: true
				},

				{
					title: '所属角色',
					name: 'roleName',
					value: ''
				},
				{
					title: '所属部门',
					name: 'deptName',
					value: ''
				},
				{
					title: '隶属公司',
					name: 'tenantName',
					value: ''
				}
			],
			info: {},
			userId: ''
		};
	},
	onLoad(e) {
		this.userId = e.id;
		this.fetchDetail();
	},
	methods: {
		fetchDetail() {
			detail({ id: this.userId }).then(res => {
				// console.log(res,6666)
				if (res) {
					this.info = res.data;
					let arr = this.list;
					for (let i = 0; i < arr.length; i++) {
						for (let key in this.info) {
							if (arr[i].name === key) {
								arr[i].value = this.info[key];
								if (key == 'deptName' || key == 'roleName') { 
									arr[i].value = this.info[key].replace(/,/g, ' | ');
								}
							}
						}
					}
				}
			});
		},
		// 查看他人证件
		handleViewUserCert(res) {
			// let arr = ['姓名', '电话', '交通工具', '隐私设置', '人员证件', '隐私设置'];
			const { address, latitude, longitude, vehicle } = this.info;
			if (res.name == 'userCerts') {
				const params = {
					id: this.userId,
					address,
					latitude,
					longitude,
					vehicle,
					...res
				};
				uni.setStorageSync('personalInfo_edit_msg', JSON.stringify(params));
				uni.navigateTo({
					url: '/pageModules/personalInfo/edit',
					fail: res => {
						console.log(res);
					}
				});		
				// uni.navigateTo({
				// 	url: '/pageModules/personalInfo/edit?msg=' + JSON.stringify(params),
				// 	fail: res => {
				// 		console.log(res);
				// 	}
				// });
			} else {
				return;
			}
		} 
	}
};
</script>

<style lang="scss" scoped>
.peersonalInfo {
	background-color: #f3f6f8;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	// padding-top: 16rpx;
	.main {
		background-color: #fff;
		width: 710rpx;
		box-sizing: border-box;
		// margin: 0rpx 20rpx;
		border-radius: 8rpx;
		margin-top: 16rpx;
		.main_item{
			padding: 0rpx 28rpx;
		}
		.infoItem {
			padding: 20rpx 0rpx;
			border-bottom: 2rpx solid #eeeeee;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			align-items: center;
			.left {
				display: flex;
				flex: 1;
				color: #333;
			}
			.right {
				display: flex;
				width: 500rpx;
				justify-content: flex-end;
				color: #666;
				flex-wrap: wrap;
				.avatar {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}
				.arrow {
					margin-left: 16rpx;
					display: flex;
					align-items: center;
				}
				image {
					width: 72rpx;
					height: 72rpx;
				}
				.improve{
					color: #ccc;
				}
			}
		}
	}
}
</style>
